<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-descriptions ant-pro-descriptions"
    >
      <div
        class="ant-descriptions-header"
      >
        <div
          class="ant-descriptions-title"
        >
          自定义 valueType
        </div>
        <div
          class="ant-descriptions-extra"
        >
          <div
            class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
          >
            <div
              class="ant-space-item"
            >
              <a>
                刷新
              </a>
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-descriptions-view"
      >
        <table>
          <tbody>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    链接
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <div
                      class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
                    >
                      <div
                        class="ant-space-item"
                      >
                        <a>
                          TradeCode 1
                        </a>
                      </div>
                      <div
                        class="ant-space-item"
                      >
                        <span
                          aria-label="edit"
                          class="anticon anticon-edit"
                          role="img"
                          tabindex="-1"
                        >
                          <svg
                            aria-hidden="true"
                            data-icon="edit"
                            fill="currentColor"
                            focusable="false"
                            height="1em"
                            viewBox="64 64 896 896"
                            width="1em"
                          >
                            <path
                              d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
                            />
                          </svg>
                        </span>
                      </div>
                    </div>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    标签
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <div
                      class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
                    >
                      <div
                        class="ant-space-item"
                      >
                        <span
                          class="ant-tag"
                        >
                          close
                        </span>
                        <span
                          class="ant-tag"
                        >
                          close
                        </span>
                      </div>
                      <div
                        class="ant-space-item"
                      >
                        <span
                          aria-label="edit"
                          class="anticon anticon-edit"
                          role="img"
                          tabindex="-1"
                        >
                          <svg
                            aria-hidden="true"
                            data-icon="edit"
                            fill="currentColor"
                            focusable="false"
                            height="1em"
                            viewBox="64 64 896 896"
                            width="1em"
                          >
                            <path
                              d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"
                            />
                          </svg>
                        </span>
                      </div>
                    </div>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProDescriptions 自定义 ValueType Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 描述列表标题
        </li>
        <li>
          <strong>
            columns
          </strong>
          : 列配置数组
        </li>
        <li>
          <strong>
            editable
          </strong>
          : 可编辑配置
        </li>
        <li>
          <strong>
            request
          </strong>
          : 异步请求函数
        </li>
      </ul>
      <h4>
        ProProvider 配置：
      </h4>
      <ul>
        <li>
          <strong>
            valueTypeMap
          </strong>
          : 自定义 valueType 映射表
        </li>
        <li>
          <strong>
            render
          </strong>
          : 自定义渲染函数
        </li>
        <li>
          <strong>
            formItemRender
          </strong>
          : 表单项渲染函数
        </li>
      </ul>
      <h4>
        自定义 ValueType 配置：
      </h4>
      <ul>
        <li>
          <strong>
            link
          </strong>
          : 自定义链接类型
        </li>
        <li>
          <strong>
            tags
          </strong>
          : 自定义标签类型
        </li>
        <li>
          <strong>
            render 函数
          </strong>
          : 定义如何渲染数据
        </li>
        <li>
          <strong>
            formItemRender 函数
          </strong>
          : 定义编辑时的表单组件
        </li>
      </ul>
      <h4>
        TagList 组件特点：
      </h4>
      <ul>
        <li>
          <strong>
            动态添加
          </strong>
          : 支持动态添加新标签
        </li>
        <li>
          <strong>
            输入验证
          </strong>
          : 防止重复标签
        </li>
        <li>
          <strong>
            键盘交互
          </strong>
          : 支持回车和失焦确认
        </li>
        <li>
          <strong>
            状态管理
          </strong>
          : 管理输入状态和标签列表
        </li>
      </ul>
      <h4>
        Column 配置：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 列标题
        </li>
        <li>
          <strong>
            dataIndex
          </strong>
          : 数据字段名
        </li>
        <li>
          <strong>
            valueType
          </strong>
          : 使用自定义的 valueType
        </li>
        <li>
          <strong>
            render
          </strong>
          : 自定义渲染函数，支持 action 参数
        </li>
      </ul>
      <h4>
        Render 函数参数：
      </h4>
      <ul>
        <li>
          <strong>
            text
          </strong>
          : 当前字段的值
        </li>
        <li>
          <strong>
            row
          </strong>
          : 当前行数据
        </li>
        <li>
          <strong>
            index
          </strong>
          : 行索引
        </li>
        <li>
          <strong>
            action
          </strong>
          : 操作对象，包含 reload 等方法
        </li>
      </ul>
      <h4>
        类型定义：
      </h4>
      <ul>
        <li>
          <strong>
            TableListItem
          </strong>
          : 表格数据项类型
        </li>
        <li>
          <strong>
            泛型支持
          </strong>
          : ProDescriptions
          <tablelistitem
            link=""
            tags=""
          >
            <li>
              <strong>
                类型安全
              </strong>
              : 提供完整的类型检查
            </li>
            <h4>
              使用场景：
            </h4>
            <ul>
              <li>
                <strong>
                  自定义组件
                </strong>
                : 需要特殊的展示组件
              </li>
              <li>
                <strong>
                  复杂交互
                </strong>
                : 需要复杂的用户交互
              </li>
              <li>
                <strong>
                  业务定制
                </strong>
                : 根据业务需求定制展示方式
              </li>
              <li>
                <strong>
                  编辑功能
                </strong>
                : 需要自定义编辑组件
              </li>
            </ul>
            <h4>
              最佳实践：
            </h4>
            <ul>
              <li>
                <strong>
                  组件封装
                </strong>
                : 将复杂的自定义组件封装为独立组件
              </li>
              <li>
                <strong>
                  类型定义
                </strong>
                : 为自定义组件定义完整的类型
              </li>
              <li>
                <strong>
                  状态管理
                </strong>
                : 合理管理组件的内部状态
              </li>
              <li>
                <strong>
                  交互设计
                </strong>
                : 提供清晰的用户交互反馈
              </li>
            </ul>
          </tablelistitem>
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>